import React from 'react'
import CustomButton from "../../../../../../../shared-components/CustomButton/CustomBotton";
import PkCounter from "./PkCounter/PkCounter";

const OnLiveHeaderFullScreenPk = props => {
    const {
        setShowPk,
    } = props

    const PkTemplate = (
        <div>
            <div
                onClick={() => setShowPk(false)}
                className='full-screen-mask'
                style={{zIndex: 3,}}
            />
            <div className='live-room-header-player-full-side' style={{width: '50vh'}}>
                <div className='live-room-header-player-full-side-pk'>
                    <div className='mg-b-1'>
                        <p>添加比分</p>
                    </div>
                    <PkCounter/>
                    <PkCounter/>
                    <div
                        style={{
                            width: '200px',
                            margin: '0 auto',
                        }}
                    >
                        <CustomButton>
                            开启
                        </CustomButton>
                    </div>

                    <div className='text-align-center mg-t-2'>
                        <p className='mg-b-1'>比分预览</p>

                        <div
                            className='flex-space-between-align-center text-align-center'
                            style={{
                                width: '200px',
                                margin: '0 auto',
                            }}
                        >
                            <div>
                                <div className='mg-b-1'>- -</div>
                                <div>球队名称</div>
                            </div>

                            <div>
                                vs
                            </div>

                            <div>
                                <div className='mg-b-1'>- -</div>
                                <div>球队名称</div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    )

    return PkTemplate
}

export default OnLiveHeaderFullScreenPk
